<template>
    <div>
        <div class="search_center">
          <div class="search" @click="$router.push('/search')">
            <van-icon name="search"></van-icon>
                  <div class="searct-text">搜索鲜花、蛋糕</div>
          </div>
        </div>
        <!-- 内容 -->
       <div class="cate_center">
            <div class="cate_left">
              <div 
              v-for="(cate , index) in cates"
              :key="cate.id"
              @click="switchTab(index)"
              :class="['cate',{active: index === num}]">{{cate.name}}</div>
            </div>
            <div class="cate_right">
              <div v-if="shops" class="noshops"></div>
             <div class="items">
        <div class="item" @click='enterItem(item.id)' v-for="item in items" :key="item.id">
          <img
            :src="item.pic"
            class="item-pic"
            alt=""
            />
          <div class="item-info">
            
            <h5>{{item.name}}</h5>
            <div class="item-price">
              <p class="price">￥{{item.minPrice}}</p>
              
            </div>
          </div>
        </div>
      </div>
              </div>
            </div>
               <mtabbar/>
       </div>
 
</template>

<script>
import Mtabbar from '_components/Mtabbar'
import { fetchCates , fetchItems} from '_api'
export default {
   name:'cate',
  data () {
    return {
      cates:[],
      num:0,
      items:[],
      shops:false
    }
  },
  created(){
    this.fetchCates()
    
  },

  methods:{

    switchTab(index){
        this.num=index
              this.fetchItems()
              // if(items.length===0){
              //   this.shops=true
              // }
    },
    enterItem(id){
     this.$router.push(`/detail/${id}`)
    },
         fetchCates(){
           fetchCates().then(res => {
              if(res.data.code===0)
                this.cates=res.data.data
                 this.fetchItems()
             }
           )
         }  ,
           fetchItems(){
      fetchItems({
        categoryId:this.cates[this.num].id
        
      }).then(res =>{
      if(res.data.code===0){
        console.log(res)
        this.items=res.data.data.result
        this.shops=false
      }
      if(res.data.code===700){
        this.items=[]
        this.shops=true
      }
      }
)      
    }
    },
  
  components: {
    Mtabbar
  }
}
</script>

<style lang="scss" scoped>
.search_center{
  padding: 5px 10px;
  background-color: #fff;
    border-bottom:1px solid #F1F3F6;
  .search{
    height: 0.9rem;
    background-color: #F3F5F7;
    border-radius: 0.9rem;
    display: flex;
    line-height: 0.9rem;
  
    .van-icon{
  
      margin:5px 10px;
      color: #71797F;
    }
    .searct-text{
      color: #71797F;
      font-size: 0.375rem;
    }
  }
}
.cate_center{
  position: fixed;
  top: 1.2rem;
  bottom:1.25rem;
  left: 0;
  right:0;
  background-color: #fff;
display: flex;
.cate_left{
  width: 2.5rem;
  height: 100%;
  border-right: 0.025rem solid #f1f1f1;
   overflow: auto;
   .cate{
     height: 1.4rem;
     font-size: 0.35rem;
     text-align: center;
     line-height: 1.4rem;
     &.active{
       border-left: 2px solid #ff734c;
       color: #ff734c;
     }
   }
}
.cate_right{
  width: 7.5rem;
  height: 100%;
  // background-color: rgb(145, 45, 45);
  overflow: auto;
   .noshops{
             width: 100%;
             height: 100%;
             background-color: rgb(143, 53, 53);
             background: url('../../assets/images/noshop.jpg') no-repeat center ;
           }
 .items {
    padding: 0 8px;

    .item {
      display: flex;
      background-color: #fff;
      border-radius: 0.25rem;
    margin-bottom:10px;
    overflow: hidden;
      img {
        width:3rem;
        height:3rem;
      }
      .item-info {
        flex: 1;
           padding:0 10px;
          
        h5 {
          margin: 0;
          color: #333;
          font-size: 16px;
          line-height: 40px;
          margin-bottom: 20px;
        }
 
        .item-price {
          display: flex;
           color: #232628;
        font-size: 17px;
        justify-content: space-between;
        align-items: center;
        p{
            margin:0;
            color: #ff4437;
        }
        }
      }
    }
  }
}
}
</style>
